<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

<div class="card" *ngIf="!isLoading">
  <h4 class="card-header">Account settings</h4>
  <div class="card-block">
    <form #accountForm="ngForm" (ngSubmit)="save(user)">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input class="form-control" type="text" name="username" [(ngModel)]="user.username" placeholder="Username" required>
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
        <input class="form-control" type="email" name="email" [(ngModel)]="user.email" placeholder="Email" required>
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-black-tie"></i></span>
        <select class="form-control" name="role" [(ngModel)]="user.role">
          <option value="" disabled>Role</option>
          <option value="user">User</option>
          <option value="admin">Admin</option>
        </select>
      </div>
      <button class="btn btn-primary" type="submit" [disabled]="!accountForm.form.valid">
        <i class="fa fa-save"></i> Save
      </button>
    </form>
  </div>
</div>